<template>
    <div class="detail-page">
        <titleVue @close="close" :title="title_text"></titleVue>

        <!--    顶部图片-->
        <div class="top-img">
            <div class="icon">
                <!--                                <span class="span1" @click="goBack()">-->
                <!--                                </span>-->
                <!--                <span class="span2" @click="collect()">-->
                <!--                  <a-icon v-if="product.collect === '0'" type="star" style="font-size: 1.2rem; color: #61666d"/>-->
                <!--                  <a-icon v-else type="star" theme="filled" style="font-size: 1.2rem; color:#feb133 "/>-->
                <!--                </span>-->
            </div>
            <!--  有上传的图片-->
            <van-swipe v-if="product.product_imgs.length > 0" class="my-swipe" :autoplay="6000" indicator-color="white">
                <van-swipe-item v-for="(image, index) in product.product_imgs" :key="index">
                    <img :src="image.url" alt="">
                </van-swipe-item>
            </van-swipe>
            <!--  没有上传图片-->
            <van-swipe v-else class="my-swipe" :autoplay="6000" indicator-color="white">
                <div style="background-color: #f7f8fa">
                    <van-swipe-item>
                        <van-uploader
                            v-model="images"
                            preview-size="13rem"
                            :deletable=false
                            :show-upload=false
                            multiple
                            :preview-full-image=false
                        />
                    </van-swipe-item>
                </div>
            </van-swipe>
        </div>
        <div class="container">
            <!--    作品信息-->
            <div class="product-info">
                <div style="display: flex; justify-content: space-between; justify-items: center; line-height: 1rem">
                    <h3 style="font-weight: 600; margin: 0 0 0.6rem 0; font-size: 18px;">{{ product.product_name }}</h3>
                    <span  class="favorites">
                        <input  type="checkbox" :checked="product.collect === '1'" id="favorite" name="favorite-checkbox"
                                value="favorite-button"/>
                        <label @click="collect()" for="favorite">
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                               stroke="currentColor"
                               stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                               class="feather feather-heart"><path
                              d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
                        </label>
                    </span>
                </div>

                <div class="button">
                    <div>
                        <button v-for="(item, index) in product.product_pType" :key="index">
                            {{ item }}
                        </button>
                    </div>
                </div>
            </div>
            <!--    用户信息-->
            <div class="user-info">
                <div class="user" :style="product.create_user !== 'null' ? '' : 'margin-bottom: 0.4rem'">
                    <div style="height: 2rem;width: 2rem;">
                        <img v-if="product.headimgurl !== 'null'" :src="product.headimgurl" style="width: 100%; height: 100%; border-radius: 50%;"/>
                        <div v-else class="headimgurl man"></div>
                    </div>
                    <h3>{{ product.create_user !== 'null' ? product.create_user : ''}}</h3>
                </div>
                <div class="button">
                    <!--  部门名称-->
<!--                    <button v-if="product.dept_name !== 'null' && product.dept_name !== ''">
                        {{ product.dept_name }}
                    </button>-->
                    <!--  地区-->
                    <button v-if="product.area !== 'null' && product.area !== ''">
                        {{ product.area }}
                    </button>

                </div>
            </div>
            <!--    作品详情-->
            <div class="product-detail">
                <!-- 发布时间-->
                <div class="time">
                    <h3>发布时间: </h3>
                    <!--<p>{{  myUtil.dateFormat(product.create_time, 'yyyy年MM月dd日 HH:mm') }}</p>-->
                    <p>{{ product.create_time }}</p>
                </div>

                <div class="time" v-if="product.address !== 'null' && product.address !== null && product.address !== undefined && product.address !== ''">
                    <h3>详细地址: </h3>
                    <!--<p>{{  myUtil.dateFormat(product.create_time, 'yyyy年MM月dd日 HH:mm') }}</p>-->
                    <p>{{ product.address === 'null' ? '' : product.address }}</p>
                </div>
                <!-- 交换意向-->
<!--                <div v-if="product.product_jyType === '交换'" class="description">
                    <h3>交换意向: </h3>
                    <p>{{ product.remark === 'null' || product.remark === '' ? '暂无交换意向' : product.remark }}</p>
                </div>-->

                <!-- 作品介绍-->
                <div class="description">
                    <h3>作品介绍: </h3>
                    <p>{{ product.product_description }}</p>
                </div>
                <!-- 作品照片-->
                <div class="imgs">
                    <h3 style="margin-bottom: -0.4rem">作品照片: </h3>
                    <div class="img">
                        <div v-if="product.product_imgs.length > 0">
                            <van-uploader
                                v-model="product.product_imgs"
                                preview-size="3.5rem"
                                :deletable=false
                                :show-upload=false
                                multiple
                            />
                        </div>

                        <div v-else>
                            <van-uploader
                                v-model="images"
                                preview-size="3.5rem"
                                :deletable=false
                                :show-upload=false
                                multiple
                            />
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!--    底部按钮-->
        <div class="bottom-button"
             :class="this.product.product_status != '0' ||this.product.product_xiajia_status != '0' ? 'bottom-button-hidden' : ''">
            <div class="content">
<!--                <button v-if="this.product.product_status == '0' && this.product.product_xiajia_status == '0'"
                        @click="contactSeller()">联系卖家
                </button>-->
                <button @click="shut()">返回</button>
            </div>
        </div>
    </div>
</template>

<script>
import titleVue from "../../title.vue";

import {Dialog, Toast} from 'vant'
import dayjs from 'dayjs'
import Util from "../../../../utils/util";

export default {
    name: 'DetailPage',
    inject: ['$baseUrl','$apiUrl', '$headImgUrl'],
    components: {
        titleVue
    },
    mounted() {
        this.proId = Util.getUrlByHref('id');
        this.initData();
    },
    data() {
        return {
            title_text: "作品详情",
            images: [{url: './src/assets/images/pro.png', isImage: true}],
            proId: 1,
            product: {
                product_name: '',  // 名称
                product_pType: [], // 物品类型
                product_jyType: '', // 交易类型
                product_area: '', // 所在区域
                product_description: '', // 物品介绍
                product_phone: '', // 联系方式
                product_price: '', // 物品价格
                product_salePrice: '', // 出售价格
                product_remark: '', // 互换备注
                product_status: '', // 交易状态
                product_xiajia_status: '', // 下架状态
                product_imgs: [], // 物品照片
                create_user: '', // 创建用户名称
                sex: '', // 性别
                create_time: '', // 发布时间
                dept_name: '', //部门
                area: '', // 地区
                collect: '0', // 是否收藏
                remark: '', // 交换意向
                headimgurl: '', // 用户头像
                address: '',  // 详细地址
            }
        }
    },
    methods: {
        // 初始化数据
        async initData() {

            let url = this.$apiUrl + '/product/getProductInfoById'
            let userId = localStorage.getItem('user_id');
            console.log('发送请求')
            const {data: res} = await this.$http.post(url,{
                proId: this.proId,
                userId: userId
            })
            let time = res.data.create_time;
            if (time !== 'null' && time !== '' && time !== null){
                // 使用 dayjs 解析日期时间字符串
                const dateTime = dayjs(res.data.create_time);
                // 格式化日期时间为指定格式
                res.data.create_time = dateTime.format('YYYY年MM月DD日 HH:mm:ss');
            }
            console.log('响应结果~~~~~', res)
            if (res.code === 200) {
                this.product.product_name = res.data.name; // 名称
                let pTypeArr = res.data.production_type.split(",").map(item => item.trim());
                this.product.product_pType = pTypeArr; // 作品类型
                this.product.create_user = res.data.create_user; // 创建用户名称
                this.product.area = res.data.area; // 地区
                this.product.product_status = res.data.status; // 交易状态
                this.product.product_phone = res.data.phone; // 联系方式
                this.product.headimgurl = this.$headImgUrl +  res.data.headimgurl; // 发布人头像
                this.product.address = res.data.address; // 详细地址
                this.product.create_time = res.data.create_time; // 发布时间
                this.product.product_description = res.data.description.replace(/\\n/g, "\n"); // 物品介绍

                if (res.data.imgs !== '' && res.data.imgs !== null && res.data.imgs !== 'null') {
                    let imgs = res.data.imgs.split(",").map(item => item.trim());
                    // 物品照片
                    for (let i = 0; i < imgs.length; i++) {
                        let imgObj = {
                            url: this.$headImgUrl + imgs[i],
                            isImage: true
                        };
                        this.product.product_imgs.push(imgObj);
                    }
                }
                this.product.collect = res.data.collect; // 是否收藏
            }
        },

        // 修改收藏状态
        async updateCollectById(newId) {
            let url = this.$apiUrl + '/product/updateCollectById/'
            let phone = localStorage.getItem('phone');
            let userId = localStorage.getItem('user_id');
            const {data: res} = await this.$http.post(url, {
                proId: this.proId,
                userId: userId,
                phone: phone
            })
            console.log('响应结果~~~~~', res)
            if (res.code === 200) {
                this.product.collect = newId;
            }
        },
        // 添加收藏状态
        async saveCollectById(newId) {
            let phone = localStorage.getItem('phone');
            let userId = localStorage.getItem('user_id');
            let url = this.$apiUrl + '/product/saveCollectById/'
            const {data: res} = await this.$http.post(url, {
                proId: this.proId,
                userId: userId,
                phone: phone
            })

            if (res.code === 200) {
                console.log('响应结果~~~~~', res)
                this.product.collect = newId;
            }
        },
        // 点击返回按钮
        goBack() {
            console.log('返回~~~')
        },
        // 点击收藏按钮
        collect() {
            if (this.product.collect === '1') {
                console.log('取消收藏~~~~')
                this.updateCollectById('0')
            } else if (this.product.collect === '0') {
                console.log('收藏~~~~')
                this.saveCollectById('1')
            }
        },
        close() {// 关闭当前窗口
            this.va.close();
        },
        // 联系卖家
        contactSeller() {
            if (this.product.product_status == '0') {
                Dialog.alert({
                    title: '卖家联系方式',
                    message: `<a href="javascript:void(0)" onclick="function callPhone() {
                  // console.log('调用了拨打电话方法', ${this.product.product_phone});
                  this.va.phoneCall(${this.product.product_phone}).then(function () { }).catch(console.error);
                } callPhone()">${this.product.product_phone}</a>`,
                    theme: 'round-button',
                    confirmButtonText: '关闭'
                }).then(() => {
                    // on close
                });
            } else {
                Toast({
                    message: '已完成交易',
                    position: 'top',
                });
            }
        },
        // 关闭窗口
        shut() {
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped lang="less">
.detail-page {
    overflow: hidden;
    // 顶部图片
    .top-img {
        width: 100vw;

        .icon {
            display: flex;
            position: relative;
            justify-content: space-between;
            margin: 1.9rem 0.5rem -2rem 0.5rem;
            z-index: 1;
            color: #fff;
        }

        .my-swipe {
            color: #39a9ed;
            font-size: 20px;
            height: 12.5rem;
            text-align: center;
            overflow: hidden;

            /deep/ .van-swipe__indicator {
                background-color: #0349df;
            }

            img {
                width: 100%;
                height: 12.5rem;
                object-fit: cover;
            }
        }
    }

    .container {
        height: calc(100vh - 3.4rem - 2.75rem - 12.5rem);
        overflow: auto;
        // 作品信息
        .product-info {
            margin: 1.4rem;
            //background-color: #a4c9ee;

            .price {
                color: #f79b1a;
                margin: -0.2rem 0;
            }
            .favorites{
                label {
                    display: flex;
                    align-items: center;
                    gap: 14px;
                    //padding: 10px 15px 10px 10px;
                    cursor: pointer;
                    user-select: none;
                    border-radius: 10px;
                    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                    color: black;
                }

                input {
                    display: none;
                }

                input:checked + label svg {
                    fill: hsl(0deg 100% 50%);
                    stroke: hsl(0deg 100% 50%);
                    animation: heartButton 1s;
                }

                @keyframes heartButton {
                    0% {
                        transform: scale(1);
                    }

                    25% {
                        transform: scale(1.3);
                    }

                    50% {
                        transform: scale(1);
                    }

                    75% {
                        transform: scale(1.3);
                    }

                    100% {
                        transform: scale(1);
                    }
                }

                input + label .action {
                    position: relative;
                    overflow: hidden;
                    display: grid;
                }

                input + label .action span {
                    grid-column-start: 1;
                    grid-column-end: 1;
                    grid-row-start: 1;
                    grid-row-end: 1;
                    transition: all .5s;
                }

                input + label .action span.option-1 {
                    transform: translate(0px,0%);
                    opacity: 1;
                }

                input:checked + label .action span.option-1 {
                    transform: translate(0px,-100%);
                    opacity: 0;
                }

                input + label .action span.option-2 {
                    transform: translate(0px,100%);
                    opacity: 0;
                }

                input:checked + label .action span.option-2 {
                    transform: translate(0px,0%);
                    opacity: 1;
                }

            }

            .button {
                display: flex;
                flex-wrap: wrap;

                button {
                    font-size: 12px;
                    left: 0;
                    margin-right: 0.6rem;
                    margin-bottom: 0.6rem;
                    padding: 0.18rem 0.6rem 0.15rem 0.6rem;
                    //border: 1px solid #e0e2e3;
                    border: none;
                    //color: #a2a3a4;
                    //background-color: #ffffff;
                    background-color: #8ed9a2;
                    color: #fff;
                }

                button:last-child {
                    background-color: #6dc9fc;
                    color: #fff;
                }
            }

        }

        // 用户信息
        .user-info {
            margin: -0.5rem 1.4rem;
            //background-color: #f0d66a;
            //padding: 0.6rem 0;

            .user {
                display: flex;
                justify-content: left;
                justify-items: center;
                line-height: 2rem;
                margin-bottom: 0.6rem;

                .headimgurl.woman {
                    //background-image: url(./src/assets/images/woman.jpeg);
                }

                .headimgurl.man {
                    //background-image: url(./src/assets/images/man.jpeg);
                }

                .headimgurl {
                    height: 100%;
                    width: 100%;
                    border-radius: 50%;
                    background-size: 100% 100%;
                }

                h3 {
                    margin: 0 0 0 0.5rem;
                    font-size: 16px;
                }
            }

            .button {
                display: flex;
                flex-wrap: wrap;

                button {
                    font-size: 12px;
                    left: 0;
                    margin-right: 0.65rem;
                    margin-bottom: 0.65rem;
                    padding: 0.15rem 0.6rem 0.15rem 0.6rem;
                    border: none;
                    color: #fff;
                    background-color: #fbab39;
                }

                button:nth-child(2) {
                    background-color: #f0a6c7;
                }

                button:nth-child(3) {
                    background-color: #6dc9fc;
                }
            }
        }

        // 作品详情
        .product-detail {
            margin: 1rem 1.4rem;
            font-weight: 600;
            //background-color: #58e3f0;

            .time, .description, .imgs {
                h3 {
                    margin: 0;
                    font-weight: 800;
                    font-size: 14px;
                }

                b {
                    font-weight: 900;
                    margin-bottom: 0.2rem;
                    color: #544b4b;
                }

                p {
                    font-size: 13px;
                    width: cacl(2.8rem); /* 设置p标签的宽度 */
                    word-wrap: break-word; /* 设置自动换行 */
                    color: #544b4b !important;
                    margin-top: 0.2rem;
                }
            }
            // 发布时间
            .time {

            }

            // 物品描述
            .description {
                margin: 1rem 0 1.5rem 0;
                p {
                    font-size: 13px;
                    width: cacl(100vm - 2.8rem); /* 设置p标签的宽度 */
                    overflow-wrap: break-word; /* 设置自动换行 */
                    word-break: break-all; /* 可以兼容一些旧版浏览器，实现自动换行 */
                    white-space: pre-wrap; /* 或者 unset */
                    color: #544b4b;
                }
            }

            // 物品照片
            .imgs {
                .img {
                    display: flex;
                    left: 0;
                    flex-wrap: wrap;
                    margin-top: 0.8rem;

                    img {
                        width: 3.8rem;
                        height: 3.8rem;
                        margin-right: 0.4rem;
                        object-fit: cover; /* 保持图片比例 */
                        margin-top: 0.4rem;
                    }

                    img:nth-child(n + 6) {
                        margin: 0.5rem 0 0 0;
                    }
                }
            }
        }
    }

    // 底部按钮
    .bottom-button {
        //display: flex;
        //justify-content: right;
        margin-left: calc(100vw - 12rem);
        width: 100%;
        //background-color: #8ed9a2;
        color: #ffffff;
        font-weight: 600;
        padding: 0.5rem 0;

        button {
            width: 5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
            border: none;
            letter-spacing: 0.1rem;
            border-radius: 8px;
            margin-right: 0.5rem;
        }

        button:nth-child(1) {
            background-color: #fac97f;
        }

        button:nth-child(2) {
            background-color: #f79100;
            margin-right: 1rem;
        }
    }

    .bottom-button-hidden {
        margin-left: calc(100vw - 6.5rem);

        button {
            background-color: #f79100 !important;
        }
    }
}

.container::-webkit-scrollbar {
    /* 隐藏滚动条 */
    display: none;
}

</style>
